<template>
    <div class="container">
        <div class="fixed-box" :class="{'fixed-box-fixed': tabsRow}">
            <div class="btn-box flex">
                <div @click="showSaveDialog = true">取消</div>
                <div>
                    <button @click="addCustomerSubmit">完成({{checkedList.length}})</button>
                </div>
            </div>
            <div class="flex header-box" :class="{'search-icon-none': checkedList.length > 0}">
                <div class="headshop-box">
                    <div class="flex img-row">
                        <div v-for="item in checkedList" :key="item" class="img-box">
                            <div v-if="item.checked">
                                <img v-if="item.avatar && item.checked" class="width-35 height-35" :src="item.avatar" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="search-box">
                    <van-search
                        v-model="listQuery.nickname"
                        placeholder="搜索"
                        clearable="false"
                        @search="onSearch"
                        placeholder-style='font-size:13px;color:#999999;'
                        >
                    </van-search>
                </div>
            </div>
        </div>
        <div :class="{'height-101': tabsRow}"></div>
        <div class="ai-add flex flex-between height-50 pad-l-15 pad-r-15" @click="showGoSaveDialog = true">
            <div class="font-15">智能添加</div>
            <van-icon name="arrow" size="11px" color="#999999" />
        </div>
        <div class="customer-title">
            <div>我的顾客<span class="mar-l-9">({{customerTotal}})</span></div>
        </div>
        <div class="pull-refresh">
            <div class="content-list" v-if="!dataNone">
                    <div class="list-row" :style="item.checked ? 'background: #ededed;' : ''" v-for="(item,index) in listData" :key="index" @click="checkClick(index,$event)">
                        <van-checkbox :value="item.checked" checked-color="#f8c400"></van-checkbox>
                        <div class="self-cell-box">
                            <div class="self-cell">
                                <img v-if="item.avatar" :src="item.avatar"/>
                                <div class="nickname">{{item.nickname}}</div>
                            </div>
                        </div>
                    </div>
                    <base-line v-if="pullLoad.finished"  title='我是有底线滴'></base-line>
            </div>
            <div class="pad-10 mar-t-10 align-c" v-else>
                <img v-if="fileSpace" mode="widthFix" class="width-247.5 height-193.5 mar-t-30"
                    :src="fileSpace + '/images/customer-nodata.png'"/>
                <div class="pad-t-22 font-18 font-gray">暂无顾客数据~</div>
            </div>
        </div>
        <div class="show-dialog">
            <van-dialog
                use-slot
                title="您将离开本页面,是否保存当前已选顾客?"
                :show="showSaveDialog"
                show-cancel-button
                confirmButtonText="保存"
                cancelButtonText="不保存"
                close-on-click-overlay
                @cancel="onCancelSave(1)"
                @confirm="onConfirmSave(1)"
                @close="onCloseDialog"
            >
            </van-dialog>
        </div>
        <div class="show-dialog">
            <van-dialog
                use-slot
                title="您将离开本页面,是否保存当前已选顾客?"
                :show="showGoSaveDialog"
                show-cancel-button
                confirmButtonText="保存"
                cancelButtonText="不保存"
                close-on-click-overlay
                @cancel="onCancelSave(2)"
                @confirm="onConfirmSave(2)"
                @close="onCloseDialog"
            >
            </van-dialog>
        </div>
    </div>
</template>
<script>
import { pagingAddCustomer, saveLabel } from '@/api/personal'
import baseLine from '@/components/BaseLine/index'
export default {
  components: { baseLine },
  data() {
    return {
      value: '',
      dataNone: false,
      showSaveDialog: false,
      showGoSaveDialog: false,
      tabsRow: false, // 用于固定头部
      checkedList: [],
      customerTotal: 0,
      labelGroupId: null,
      labelName: null,
      resParams: {
        memberId: '',
        labelGroupId: null,
        nickname: ''
      },
      listQuery: {
        memberId: '',
        labelGroupId: null,
        currentPage: 1,
        size: 10,
        nickname: ''
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      listData: []
    }
  },
  onLoad() {
    // 重置缓存data里面的数据
    console.log(111)
    // Object.assign(this.$data, this.$options.data())
  },
  onShow() {
    Object.assign(this.$data, this.$options.data())
    this.listQuery.currentPage = 1
    this.listData = []
    this.labelGroupId = this.getCurrentPage().query.labelGroupId
    this.labelName = this.getCurrentPage().query.labelName
    this.pageInit()
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageInit()
    }
  },
  onPageScroll: function(e) {
    const query = this.$pt.createSelectorQuery()
    query.select('.ai-add').boundingClientRect()
    // query.selectViewport().scrollOffset()
    query.exec(res => {
      if (res[0].top <= -10) {
        this.tabsRow = true
      } else {
        this.tabsRow = false
      }
    })
  },
  methods: {
    pageInit() {
      this.listQuery.memberId = this.getCustomerId
      this.listQuery.labelGroupId = this.labelGroupId
      this.listQuery.nickname = this.value
      pagingAddCustomer(this.listQuery).then(response => {
        this.dataNone = false
        if (response.isError) return
        response.data.records.forEach(element => {
          element.checked = false
          this.listData.push(element)
        })
        console.log('自定义添加顾客', response)
        this.customerTotal = response.data.total
        this.listQuery.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
        if (this.listData.length === 0) {
          this.dataNone = true
        }
      }).catch({})
    },
    // handleCheckChange(e) {
    //   this.checkedList = e.mp.detail
    // },
    onSearch(e) {
      console.log('搜索事件', e)
      this.value = e.mp.detail
      this.listQuery.currentPage = 1
      this.listData = []
      this.pullLoad.finished = false
      setTimeout(() => {
        this.pageInit()
      }, 200)
    },
    checkClick(index, e) {
      this.listData[index].checked = !this.listData[index].checked
      if (this.listData[index].checked) {
        // this.checkedList.push(this.listData[index].memberId)
        console.log(111)
        this.checkedList.push(this.listData[index])
      } else {
        // let retIndex = this.checkedList.indexOf(this.listData[index].memberId)
        for (let i = 0; i < this.checkedList.length; i++) {
          if (this.checkedList[i].memberId === this.listData[index].memberId) {
            this.checkedList.splice(i, 1)
          }
        }
        // let retIndex = this.checkedList.filter((item, i) => {
        //   if (item.memberId === this.listData[index].memberId) {
        //     return i
        //   }
        // })
        // this.checkedList.splice(retIndex, 1)
      }
      console.log('选中的数据', this.checkedList)
    },
    onCloseDialog() {
      this.showSaveDialog = false
    },
    addCustomerSubmit() {
      // 完成添加
      if (this.checkedList.length <= 0) return
      this.saveData()
    },
    onConfirmSave(val) {
      // 保存选中内容
      if (this.checkedList.length <= 0) {
        this.$utils.showToast({ title: '保存成功' })
        if (val === 1) {
          this.$pt.navigateBack({
            delta: 1
          })
        } else {
          this.$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/intelligence-add/main?labelGroupId=' + this.labelGroupId})
        }
        // this.$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/tags-group/main?labelGroupId=' + this.labelGroupId + '&labelName=' + this.labelName})
      } else {
        this.saveData()
      }
    },
    onCancelSave(val) {
      // 取消保存
      this.$utils.showToast({ title: '保存失败' })
      setTimeout(() => {
        if (val === 1) {
          this.$pt.navigateBack({
            delta: 1
          })
        } else if (val === 2) {
          this.$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/intelligence-add/main?labelGroupId=' + this.labelGroupId})
        }
      }, 1500)
    //   this.$pt.navigateTo({url: '/pages/home/customer-manage/tags-manage/tags-group/main?labelGroupId=' + this.labelGroupId + '&labelName=' + this.labelName})
    },
    saveData() {
      // 发送请求 新增顾客
      let memberIds = this.checkedList.map(item => {
        return item.memberId
      })
      let params = {
        memberIds: memberIds,
        labelGroupId: this.labelGroupId
      }
      saveLabel(params).then(response => {
        if (response.isError) return
        this.$utils.showToast({ title: response.msg })
        setTimeout(() => {
          this.$pt.navigateBack({
            delta: 1
          })
        }, 1500)
      }).catch({})
    }
  }
}
</script>
<style lang="less" scoped>
.container{
    background: white;
    min-height: calc(100vh);
}
.fixed-box{
    // position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    border-top: 1px solid #ededed;
    background: white;
    z-index: 99;
    .btn-box{
        padding: 0 15px;
        height: 49px;
        font-size: 14px;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ededed;
        button{
            background: #f8c400;
            line-height: 1;
            font-size: 14px;
            padding: 6px 5px;
            border-radius: 3px;
            color: #333333;
            &::after{
                border: unset;
            }
        }
    }
    .header-box{
        padding: 0 15px;
        justify-content: left;
        align-items: center;
        height: 49px;
        border-bottom: 1px solid #ededed;
        /deep/ .van-search{
            background: white !important;
            padding: 0px;
            // min-width: 80px;
        }
        /deep/ .van-cell--borderless{
            padding: 3px 10px 3px 0px !important;
        }
        /deep/ .van-field__body{
            margin-left: 10px;
        }
        .headshop-box{
            max-width: 240px;
            display: inline-block;
            .img-row{
                overflow-x: auto;
                .img-box{
                    &:first-child{
                        img{
                            margin-left: 0px;
                        }
                    }
                    img{
                        // flex-basis: 35px;
                        flex-shrink: 0;
                        width: 35px;
                        height: 35px;
                        border-radius: 50%;
                        margin-left: 10px;
                    }
                }
            }
        }
        .search-box{
            display: inline-block;
            width: 100%;
        }
    }
}
.fixed-box-fixed{
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 2px 6px #c5c5c5;
}
.customer-title{
    font-size: 13px;
    color: #666666;
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
    background: #f5f5f5;
}
.content-list{
    .list-row{
        height: 50px;
        position: relative;
        display: flex;
        justify-content: left;
        align-items: center;
        padding: 0 15px;
        &::after{
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: calc(100% - 95px);
            border-bottom: 1px solid #ededed;
        }
        // /deep/ .van-checkbox{
        //     .van-checkbox__icon-wrap{
        //         padding-left: 15px;
        //     }
        //     .van-checkbox__label{
        //         width: 88%;
        //     }
        // }
        // /deep/ .van-radio__label{
        //     margin-left: 13px;
        // }
        .self-cell-box{
            width: 100%;
            .self-cell{
                margin-left: 13px;
                margin-top: 5px;
                height: 45px;
                display: flex;
                justify-content: left;
                align-items: center;
                img{
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    margin-right: 12px;
                }
                .nickname{
                    font-size: 15px;
                    color: #333333;
                    width: calc(100% - 47px);
                    height: 44px;
                    line-height: 44px;
                    // border-bottom: 1px solid #ededed;
                }
            }
        }
    }
}
.show-dialog{
    /deep/ .van-popup{
        top: 205px;
    }
    /deep/ .van-dialog__header{
        font-size: 18px;
        color: #333333;
        font-weight: bold;
        line-height: 1.3;
        padding-top: 36px;
        padding-bottom: 31px;
        width: 235px;
        margin: 0 auto;
    }
}
.search-icon-none{
    /deep/ .van-icon-search {
        &::before{
            content: unset;
        }
    }
}
</style>
